<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            font-size: 30px;
        }

        .box1 {
            background: red;
            display: block;
        }

        .box2 {
            background: blue;
            display: none;
        }

        .box3 {
            background: yellow;
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <button class="btn">按钮一</button>
        <button class="btn">按钮二</button>
        <button class="btn">按钮三</button>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
    <div class="container2">
        <button class="btn">按钮一</button>
        <button class="btn">按钮二</button>
        <button class="btn">按钮三</button>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <button class="next">下一页</button>
    </div>

    <div class="container3">
        <button class="btn">按钮一</button>
        <button class="btn">按钮二</button>
        <button class="btn">按钮三</button>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
    <script>

        // 三、第三个选项卡用自动播放功能；
       

        function tab(btns,divs,isNext,autoPlay) {
            btns.forEach((btn, k) => {
                btn.onclick = function () {
                    console.log(k);
                    switchTab(k);
                }
            })

            if(isNext){
                var nextBtn = document.querySelector(".next");
                var num = 0;
                nextBtn.onclick = function(){
                    console.log(num);
                    switchTab(num);

                    num++;
                    if(num==3){
                        num=0;
                    }
                }
            }
            if(autoPlay){
                // 自动播放
                var num2 = 0;
                setInterval(()=>{
                    switchTab(num2);
                    num2++;
                    if(num2==3){
                        num2=0;
                    }
                },1000)
            }


            // 把控制选项卡页码的功能提取出来 

            function switchTab(k){
                divs.forEach((div, key) => {
                        if (key == k) {
                            div.style.display = "block";
                        } else {
                            div.style.display = "none";
                        }
                })
            }
        }

        // 第一个选项卡
        var btns = document.querySelectorAll(".container .btn");
        var divs = document.querySelectorAll(".container div");
        tab(btns,divs);

        // 第二个选项卡
        var btns2 = document.querySelectorAll(".container2 .btn");
        var divs2 = document.querySelectorAll(".container2 div");
        tab(btns2,divs2,true);



        // 第三个选项卡
        var btns3 = document.querySelectorAll(".container3 .btn");
        var divs3 = document.querySelectorAll(".container3 div");
        tab(btns3,divs3,false,true);


    </script>
</body>

</html>